<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>全屏后台管理布局</title>

  <style>
    /* 移除所有默认边距，确保全屏 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      /* 禁用页面级滚动 */
    }

    /* 容器：全屏弹性布局 */
    .container-fluid {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      padding-right: 0 !important;
      padding-left: 0 !important;
    }

    /* 顶部控件栏 */
    .top-controls {
      flex-shrink: 0;
      background-color: #ffffff;
      border-bottom: 1px solid #dee2e6;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      padding: 0.75rem 1rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
      z-index: 1030;
    }

    /* 主内容区域：左右分栏，自动填满剩余空间 */
    .main-content {
      display: flex;
      flex: 1;
      min-height: 0;
      /* 允许 flex 容器内部滚动 */
      overflow: hidden;
    }

    /* 左侧面板 */
    .sidebar-left {
      width: 240px;
      flex-shrink: 0;
      background-color: #FFFAFA;
      /* color: white; */
      overflow-y: auto;
      padding: 1rem;
    }

    /* 右侧面板：自动伸展，占满剩余宽度 */
    .sidebar-right {
      flex: 1;
      background-color: #f8f9fa;
      overflow: auto;
      position: relative;
      padding: 0;
      /* 避免内边距导致图表不能撑满 */
    }

    /* 图表容器：绝对占满父容器 */
    #tempChart {
      width: 100%;
      height: 100%;
      min-height: 400px;
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      position: relative;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="modal fade" id="dynamicModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- 内容将由 JS 动态填充 -->
        <div class="modal-body">
          <div class="text-center">
            <div class="spinner-border text-primary" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <!-- 顶部控件区域 -->
    <div class="top-controls">
      <div class="d-flex gap-2">
        <!-- 下拉框 -->
        <select id="actuatorModelSelected" class="form-select rounded-start"
          style="min-width: 150px; max-width: 150px;">
          <!-- 选项由 JS 动态填充 -->
        </select>

        <div id="inputType" class="gap-2 align-items-center" style="display: flex;">
          <!-- 将 span 替换为 select -->
          <select id="type" name="type" class="form-select form-select-sm" style="width: auto;">
            <option value="sql">SQL</option>
            <option value="signature">方法</option>
          </select>
          <input id="value" name="value" class="form-control form-control-sm flex-grow-1" />
        </div>

        <div id="dataSourceInput" class="gap-2 align-items-center" style="display: flex;">
          <span>数据源</span>
          <select id="dataSource" name="dataSource" class="form-select form-select-sm" style="width: auto;">
            <option value="MYSQL">MYSQL</option>
          </select>
        </div>

        <div id="timeInput" class="gap-2 align-items-center" style="display: flex;">
          <span>定时器间隔</span>
          <input id="time" type="number" class="form-control form-control-sm flex-grow-1" style="width: auto;" />
        </div>

        <div id="searchBar" class="d-flex gap-2" style="height: 100%;">
        </div>
      </div>

      <button id="add" type="button" class="btn btn-success btn-sm align-items-center gap-1 px-3">
        <i class="bi bi-plus-square"></i> 添加
      </button>

      <button id="execute" type="button" class="btn btn-success btn-sm align-items-center gap-1 px-3">
        <i class="bi bi-skip-start"></i> 执行
      </button>

      <button id="clear" type="button" class="btn btn-danger btn-sm align-items-center gap-1 px-3">
        <i class="bi bi-trash"></i> 清空
      </button>

      <button id="save" type="button" class="btn btn-success btn-sm align-items-center gap-1 px-3">
        <i class="bi bi-save"></i> 保存
      </button>

      <button id="switchPage" type="button" class="btn btn-success btn-sm align-items-center gap-1 px-3">
        <i class="bi bi-arrow-left-right"></i> 切换页面
      </button>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左侧面板 -->
      <div class="sidebar-left">
        <div id="baseConfigContainer"></div>
        <div id="seriesConfigContainer"></div>
      </div>

      <!-- 右侧面板 -->
      <div class="sidebar-right">
        <!-- 图表容器：将被 ECharts 或其他库填充 -->
        <div id="tempChart"></div>
      </div>
    </div>
  </div>

  <script type="module" src="./src/index.js"></script>
</body>

</html>